<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>
    <title>新增地址</title>
    <style>
        .form-container { width: 500px; margin: 20px auto; padding: 20px; border: 1px solid #ddd; }
        .form-group { margin: 15px 0; }
        label { display: inline-block; width: 100px; }
        input[type="text"], input[type="tel"], select { width: 300px; padding: 6px; }
        .btn-submit { background: #4CAF50; color: white; padding: 8px 20px; border: none; cursor: pointer; }
        .btn-cancel { background: #666; color: white; padding: 8px 20px; border: none; margin-left: 10px; }
    </style>
</head>
<body>
<div class="form-container">
    <h2>新增收货地址</h2>
    <form action='/addresses' method="post">
        <input type="hidden" name="userId" value="${userId}">

        <%-- 收件人 --%>
        <div class="form-group">
            <label>收件人：</label>
            <input type="text" name="accept" required
                   placeholder="请输入收件人姓名"
                   pattern="[\u4e00-\u9fa5]{2,10}"
                   title="姓名需为2-10个汉字">
        </div>

        <%-- 联系方式 --%>
        <div class="form-group">
            <label>联系方式：</label>
            <input type="tel" name="telphone" required
                   placeholder="请输入11位手机号"
                   pattern="1[3-9]\d{9}"
                   title="请输入有效的手机号码">
        </div>

        <%-- 省市区联动（需配合JS实现） --%>
        <div class="form-group">
            <label>所在地区：</label>
            <input type="text" name="province" required placeholder="省">
            <input type="text" name="city" required placeholder="市">
            <input type="text" name="area" required placeholder="区">
        </div>

        <%-- 详细地址 --%>
        <div class="form-group">
            <label>详细地址：</label>
            <input type="text" name="street" required
                   placeholder="街道、门牌号等详细信息">
        </div>

        <%-- 默认地址 --%>
        <div class="form-group">
            <label>设为默认：</label>
            <select name="def">
                <option value="0">否</option>
                <option value="1">是</option>
            </select>
        </div>

        <%-- 操作按钮 --%>
        <div class="form-group" style="margin-top: 30px;">
            <button type="submit" class="btn-submit">保存地址</button>
            <a href="<c:url value='/addresses/user/${sessionScope.loginUser.id}'/>">取消</a>
        </div>
    </form>
</div>

<%-- 省市区联动JS示例（需引入实际数据） --%>

</body>
</html>